<template>
    <div class="wrap">
        <div class="container">
            <div class="products_block ">
                <div class="nav_position">
                    <span class="icon_home"></span>您的位置：
                    <div class="position_detail">
                        <nuxt-link to="/">首页</nuxt-link><span>></span>
                        <span>产品采购</span>
                    </div>
                </div>
            </div>
            <div class="products_content">
                <div class="cpdh">
                    <div class="daohang">
                        <!-- <li class="active">
                            <a>全部</a>
                        </li> -->
                        <li v-for="(item, index) in factoryList" :key="index" :class="item.active" @click="activeFactory(item)">
                            <a>{{ item.name }}</a>
                        </li>
                    </div>
                    <div class="product_search">
                        <input type="text" v-model="queryParams.keyword" placeholder="输入产品编号或关键词进行搜索" />
                        <div class="btn" @click="LoadData"></div>
                    </div>
                </div>
                <div class="car_out_content" v-loading="loading">
                    <div class="product_listy">
                        <!-- 产品列表循环开始 -->
                        <div class="list" v-for="(item, index) in data.data" :key="index">
                            <div class="product_goods_info">
                                <nuxt-link :to="'/products/prod/' + item.id">
                                    <div class="imgbox">
                                        <img :src="$commonImageUrl(item.image)">
                                    </div>
                                </nuxt-link>
                                <div class="product_spec_info">
                                    <nuxt-link :to="'/products/prod/' + item.id">
                                        <div class="product_name">
                                            {{ item.goods_title }}
                                            <span class="xil">{{ item.category ? item.category.name : "" }}</span>
                                        </div>
                                    </nuxt-link>
                                    <div class="product_desc">{{ item.description }}</div>
                                    <div class="product_qita">
                                        <p><span>型号：</span>{{ item.models }}</p>
                                        <p><span>规格：</span>{{ item.sku.map(x => x.sku_name).join('·') }}</p>
                                        <p><span>备注：</span>{{ item.remark }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="product_count_price">
                                <span>{{ item.sku.length > 0 ? item.sku[0].price : 0 }}</span>
                                <div class="product_price">
                                    <nuxt-link :to="'/products/prod/' + item.id">加入购物车</nuxt-link>
                                    <!-- <a class="cart" href="/memberCenter/cart"></a> -->
                                    <a class="buy"  @click="submitOrder(item)">立即购买</a>
                                </div>
                            </div>
                        </div>
                        <CustomPagination :total="data.total" :page.sync="queryParams.page" :pageSize.sync="queryParams.pageSize" @pagination="LoadData" :hidden="pageHidden"></CustomPagination>
                        <!-- 产品列表循环结束 -->
                    </div>
                </div>
            </div>
        </div>
        <!-- 右侧在线客服 -->
        <div class="floatRight">
            <CustomOrder></CustomOrder>
            <CustomSample></CustomSample>
            <OnlineService></OnlineService>
        </div>
        <!-- 右侧在线客服 结束 -->

        <!-- 采购下单-->
        <el-dialog
            title="采购下单"
            :visible.sync="dialogCgVisible"
            :close-on-click-modal="false"
            width="42%"
            top="2%">
            <div class="dialog-content dz_content">
                <el-form ref="form" :model="form" :show-message="false" status-icons label-width="25%" label-position="left">
                    <el-form-item label="企业信息" class="qy">
                        <div>
                            <span>{{ defaultEnterprise.name }}</span>
                        </div>
                        <div class="name">
                            <p>地址：{{ defaultEnterprise.address }}</p>
                        </div>
                    </el-form-item>
                    <el-form-item label="产品名称">
                        <el-input v-model="form.name" disabled value="同种异体肌腱"></el-input>
                    </el-form-item>
                    <el-form-item label="产品型号">
                        <el-input v-model="form.models" disabled ></el-input>
                    </el-form-item>
                    <el-form-item label="产品规格" prop="filings_sku_id" required>
                        <el-select v-model="form.filings_sku_id" placeholder="请选择或输入产品规格" @change="changeSku">
                            <el-option :label="item.sku_name" :value="item.id" v-for="(item, index) in form.sku" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品价格">
                        <el-input v-model="form.price" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="产品备注">
                        <el-input type="textarea" v-model="form.product_remark" placeholder="请填写产品定制要求及备注"></el-input>
                    </el-form-item>
                    <el-form-item label="数量">
                        <el-input-number v-model="form.num" :precision="0" :min="1" label="描述文字" ></el-input-number>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="form.remark" placeholder="请填写备注信息"></el-input>
                    </el-form-item>
                    <div class="cgxdtj">
                    <div class="ddjg">
                        <div class="zong">订单总价：
                        <span class="price">{{ countAmount() }}</span></div>
                        <p>包含产品 {{ form.num }} 件</p>
                    </div>
                    <div class="config_btncgxd" @click="submitOrderInfo">提交</div></div>
                </el-form>
            </div>
        </el-dialog>
        <!-- 采购下单 -->
    </div>
</template>

<script>
import api from "@/api/product";
import factoryApi from "@/api/factory";
import enterpriseApi from "@/api/enterprise";
import { baseURL, baseURLApi } from "@/utils/request";
import { getToken } from "@/utils/auth";
export default {
    name: "IndexPage",
    layout: "default",
    data() {
        return {
            dialogDzVisible: false,
            dialogSqVisible: false,
            dialogCgVisible: false,
            form: {
                sku: [],
                price: 0,
                num: 1
            },
            num: 1,
            imageUrl: '',
            // 页面查询参数
            queryParams: {
                page: 1,
                pageSize: 10,
                factory_id: null,
                keyword: ""
            },
            data: {
                data: [],
                total: 0
            },
            factoryList: [], // 厂商数据
            pageHidden: true,
            loading: false,
            defaultEnterprise: {},
            // 定制产品
            customForm: {
                goods_num: 1,
                price: 0,
                goods_id: null,
                goods_title: null,
                models: null,
                annex: ""
            },
            customFactory: [],
            customGoods: [],
            uploadImgUrl: baseURLApi + "/api.common/upload", // 上传的图片服务器地址
            fileType: ['txt', "doc", "docx", "xls", "xlsx", "jpg", "png", "jpeg"],
            fileList: [],
            headers: {
                token: getToken(),
            },
            fileSize: 5,
            // 样品申请
            sampleForm: {}
        };
    },
    created() {
        this.LoadData();
        this.LoadFactoryList();
        this.LoadDefaultEnterprise();
    },
    methods: {
        // 加载默认企业
        LoadDefaultEnterprise: function () {
            enterpriseApi.GetDefaultEr({})
                .then((res) => {
                    console.log("res", res)
                    if (res.data === null) { 
                        res.data = {};
                        this.$message({
                            type: 'warning',
                            message: res.msg
                        });
                    }
                    this.defaultEnterprise = res.data;
                })
        },
        // 加载数据
        LoadData: function () {
            var _this = this;
            _this.loading = true;
            api.GetProductPageList(_this.queryParams)
                .then((res) => {
                    _this.data = res.data;
                    _this.loading = false;
                }).catch((err) => {
                    _this.loading = false;
                })
        },
        // 加载授权厂商
        LoadFactoryList: function () {
            var _this = this;
            _this.factoryList = [
                {id: null, name:"全部",active: "active"}
            ]
            factoryApi.GetFactoryList({})
                .then((res) => {
                    res.data.forEach(item => {
                        item.active = "";
                        _this.factoryList.push(item)
                    });
                    _this.customFactory = res.data;
                    _this.pageHidden = false;
                    if (_this.queryParams.pageSize >= _this.data.total) {
                        _this.pageHidden = true;
                    }
                })
        },
        // 选择厂商
        activeFactory: function (item) {
            this.factoryList.forEach(element => {
                element.active = "";
            })
            item.active = "active";
            this.queryParams.factory_id = item.id;
            this.queryParams.page = 1;
            this.LoadData();
        },
        // 提交订单
        submitOrder: function (item) {
            this.dialogCgVisible = true;
            if (this.$refs.form) {
                this.$refs.form.resetFields();
            }
            this.form.name = item.goods_title;
            this.form.models = item.models;
            this.form.sku = item.sku;
            this.form.goods_id = item.goods_id;
        },
        // 切换规格
        changeSku: function (val) {
            var sku = this.form.sku.find(x => x.id == val);
            this.form.price = sku.price;
        },
        // 计算商品金额
        countAmount: function () {
            return (this.form.num * this.form.price).toFixed(2);
        },
        // 点击下单
        submitOrderInfo: function () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    var input = {
                        list: [
                            {
                                goods_id: this.form.goods_id,
                                goods_num: this.form.num,
                                filings_sku_id: this.form.filings_sku_id,
                                remark: this.form.product_remark ? this.form.product_remark : ""
                            }
                        ],
                        remark: this.form.remark ? this.form.remark : "",
                        cart_ids: ""
                    }
                    this.$router.push({path: '/memberCenter/confirm', query: { goods: btoa(JSON.stringify(input)) }})
                }
            })
        }
    }
};
</script>
